<template>
    <el-dialog v-model="localVisible" title="修改停车场" width="30%" center @close="handleCancel">
      <el-form :model="UpdateForm" :rules="UpdateRules" ref="UpdateFormRef" label-position="top" label-width="0px">
        <el-form-item label="停车场编号" prop="code">
          <el-input v-model="UpdateForm.code"></el-input>
        </el-form-item>
        <el-form-item label="停车场名称" prop="name">
          <el-input v-model="UpdateForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="停车场地址" prop="address">
          <el-input v-model="UpdateForm.address"></el-input>
        </el-form-item>
        <el-form-item label="营业时间" prop="operatingHours">
          <el-input v-model="UpdateForm.operatingHours"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="UpdateForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="收费策略编号" prop="feeScheduleCode">
          <el-input v-model="UpdateForm.feeScheduleCode"></el-input>
        </el-form-item>
        <el-form-item label="停车场描述" prop="description">
          <el-input v-model="UpdateForm.description"></el-input>
        </el-form-item>
        <el-form-item label="地理位置纬度" prop="latitude">
          <el-input v-model.number="UpdateForm.latitude"></el-input>
        </el-form-item>
        <el-form-item label="地理位置经度" prop="longitude">
          <el-input v-model.number="UpdateForm.longitude"></el-input>
        </el-form-item>
      </el-form>
      <span class="dialog-footer">
        <el-button type="primary" @click="onUpdate">确定</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </span>
    </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue';
import axios from 'axios';
import { defineProps, defineEmits } from 'vue';
import { ElMessage } from 'element-plus'

const api = axios.create({
    baseURL:'http://localhost:8092',
    headers: {
        'Authorization': `${localStorage.getItem('token')}` // 从 localStorage 获取 token 并设置到请求头
    }
})

const props = defineProps({
  updateName: String,
  updateAddress: String,
  updateLatitude: String,
  updateLongitude: String,
  updateOperatingHours: String,
  updatePhone: String,
  updateFeeScheduleCode: String,
  updateDescription: String,
  updateCode: String,
  visible: Boolean,
  parkingLotId: Number // 确保这里正确声明了 parkingLotId
});

const emit = defineEmits(['update:visible', 'edit']); // 注意这里是 edit 而不是 add

const localVisible = ref(props.visible);

watch(() => props.visible, (newValue) => {
    localVisible.value = newValue;
});

watch(localVisible, (newValue) => {
if (!newValue) {
    emit('update:visible', false);
}
});

const UpdateForm = ref({
  name: props.name || '',
  address: props.address || '',
  latitude: props.latitude || '',
  longitude: props.longitude || '',
  operatingHours: props.operatingHours || '',
  phone: props.phone || '',
  feeScheduleCode: props.feeScheduleCode || '',
  description: props.description || '',
  code: props.code || ''
});

// 监听 props 变化并更新 UpdateForm
watch([() => props.updateName, () => props.updateAddress, () => props.updateLatitude, () => props.updateLongitude, () => props.updateOperatingHours, () => props.updatePhone, () => props.updateFeeScheduleCode, () => props.updateDescription, () => props.updateCode]
, ([updateName, updateAddress, updateLatitude, updateLongitude, updateOperatingHours, updatePhone, updateFeeScheduleCode, updateDescription, updateCode]) => {
    UpdateForm.value.name = updateName !== undefined ? updateName : '';
    UpdateForm.value.address = updateAddress !== undefined ? updateAddress : '';
    UpdateForm.value.latitude = updateLatitude !== undefined ? updateLatitude : '';
    UpdateForm.value.longitude = updateLongitude !== undefined ? updateLongitude : '';
    UpdateForm.value.operatingHours = updateOperatingHours !== undefined ? updateOperatingHours : '';
    UpdateForm.value.phone = updatePhone !== undefined ? updatePhone : '';
    UpdateForm.value.feeScheduleCode = updateFeeScheduleCode !== undefined ? updateFeeScheduleCode : '';
    UpdateForm.value.description = updateDescription !== undefined ? updateDescription : '';
    UpdateForm.value.code = updateCode !== undefined ? updateCode : '';
}, { immediate: true, deep: true });

const UpdateRules = {
    name: [{ required: true, message: '请输入停车场名称', trigger: 'blur' }],
    address: [{ required: true, message: '请输入停车场地址', trigger: 'blur' }],
    phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
    feeScheduleCode: [{ required: true, message: '请输入收费策略编号', trigger: 'blur' }],
    code: [{ required: true, message: '请输入停车场编号', trigger: 'blur' }]
};

const UpdateFormRef = ref(null);

const onUpdate = () => {
    const requestData = {
        id: props.parkingLotId,
        ...UpdateForm.value
    };
    UpdateFormRef.value.validate((valid) => {
        if (valid) {
        api.put('/api/v1/parking-lot/parking-lot-info', requestData
            ).then(response => {
            if (response.data.code == "200"){
                ElMessage({
                title: '成功',
                message: '修改成功',
                type: 'success',
                showClose: false,
                });
                localVisible.value = false;
                emit('edit'); // 通知父组件数据已更新
            } else {
                ElMessage({
                title: '错误',
                message: '修改失败！' + response.data.message,
                type: 'error',
            });
            }
            }).catch(error => {
            ElMessage({
                title: '错误',
                message: '修改失败！' + error.message,
                type: 'error',
            });
            });
        } else {
        return false;
        }
    });
};

const handleCancel = () => {
    localVisible.value = false;
};
</script>
  
<style scoped>
  .dialog-footer {
    display: flex;
    justify-content: space-evenly; 
    margin-top: 20px; 
  }
  
  .dialog-footer .el-button {
    width: 30%;
    height: 45px; /* 调整按钮高度 */
    font-size: 16px;
    margin-top: 20px; 
  }
</style>